import React, { useState, useEffect } from 'react';
import _ from 'lodash';
// @ts-ignore
import Empty from '@/tool/components/PageEmpty';
import type { Key } from 'react';
import { Checkbox, Input } from 'antd';
import { CloseOutlined, MailOutlined, MobileOutlined } from '@ant-design/icons';
import type { CheckboxValueType } from 'antd/lib/checkbox/Group';
import './index.less';
const { Search } = Input;

const SelectTradeContent: React.FC<ISelectTradeContentProps> = (props) => {
  const [traderList, setTraderList] = useState<TraderListType[]>([]);
  const [checkAll, setCheckAll] = useState<boolean>(false);
  const [indeterminate, setIndeterminate] = useState<boolean>(false);
  const [checkedRows, setCheckedRows] = useState<TraderListType[]>([]);
  const onSearch = () => {};

  const onChangeAll = (checked: boolean) => {
    setCheckAll(checked);
  };

  const clearSelectData = (userId?: TraderListType['userId']) => {};

  const changeCheckbox = (val: CheckboxValueType[]) => {};

  useEffect(() => {
    setTraderList(props.traderList);
  }, [props.traderList]);

  return (
    <div className="select-trade-content">
      <div className="left">
        <div className="search-box">
          <Search placeholder="搜索" onSearch={onSearch} />
          {traderList.length > 0 && (
            <Checkbox
              onChange={(e) => onChangeAll(e.target.checked)}
              checked={checkAll}
              indeterminate={indeterminate}
            >
              全选
            </Checkbox>
          )}
        </div>

        {traderList.length > 0 ? (
          <Checkbox.Group
            style={{ width: '100%' }}
            className="trader-list"
            value={props.value}
            onChange={changeCheckbox}
          >
            {traderList.map((v) => {
              return (
                <div className="list-item" key={v.userId}>
                  <Checkbox value={v.userId}>
                    <div className="name">{v.name}</div>
                    <div className="info">
                      <MobileOutlined />
                      <span className="str">{v.mobile}</span>
                    </div>
                    {v.email && (
                      <div className="info">
                        <MailOutlined />
                        <span className="str">{v.email}</span>
                      </div>
                    )}
                  </Checkbox>
                </div>
              );
            })}
          </Checkbox.Group>
        ) : (
          <Empty />
        )}
      </div>
      <div className="right">
        <div className="opt">
          <div className="length">已选{checkedRows.length}项</div>
          <div className="clear" onClick={() => clearSelectData()}>
            清空
          </div>
        </div>
        <div className="list">
          {checkedRows.map((v) => {
            return (
              <div className="check-item" key={v.userId}>
                {v.name} <CloseOutlined onClick={() => clearSelectData(v.userId)} />
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export type TraderListType = {
  userId: number;
  name: string;
  mobile: string;
  email: string | number | null;
};

interface ISelectTradeContentProps {
  /**
   * 默认选中的数据
   */
  value?: Key[];
  /**
   * 树形结构数据
   */
  traderList: TraderListType[];
  // /**
  //  * 当前交易单元
  //  */
  // marketingUnit?: DataNode[];

  getHandler?: any;
}

export { SelectTradeContent };
